﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script src="js/arc.js"></script>

    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();
            var style = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#EAE911',
                    width: 2
                })
            });

            var flightsSource;
            var addLater = function (feature, timeout) {
                window.setTimeout(function () {
                    feature.set('start', new Date().getTime());
                    flightsSource.addFeature(feature);
                }, timeout);
            };

            var pointsPerMs = 0.1;
            var animateFlights = function (event) {
                var vectorContext = event.vectorContext;
                var frameState = event.frameState;
                vectorContext.setStyle(style);

                var features = flightsSource.getFeatures();
                for (var i = 0; i < features.length; i++) {
                    var feature = features[i];
                    if (!feature.get('finished')) {

                        var coords = feature.getGeometry().getCoordinates();
                        var elapsedTime = frameState.time - feature.get('start');
                        var elapsedPoints = elapsedTime * pointsPerMs;

                        if (elapsedPoints >= coords.length) {
                            feature.set('finished', true);
                        }

                        var maxIndex = Math.min(elapsedPoints, coords.length);
                        var currentLine = new ol.geom.LineString(coords.slice(0, maxIndex));

                        //根据要素来描绘出线条
                        vectorContext.drawGeometry(currentLine);
                    }
                }
                //继续动画效果
                map.render();
            };

            flightsSource = new ol.source.Vector({
                wrapX: false,
                attributions: 'Flight data by ' +
                    '<a href="http://openflights.org/data.html">OpenFlights</a>,',
                loader: function () {
                    var url = 'resources/data/flights.json';
                    fetch(url).then(function (response) {
                        return response.json();
                    }).then(function (json) {
                        var flightsData = json.flights;
                        for (var i = 0; i < flightsData.length; i++) {
                            var flight = flightsData[i];
                            var from = flight[0];
                            var to = flight[1];

                            //创建一个两个地点之间的弧段
                            var arcGenerator = new arc.GreatCircle(
                                { x: from[1], y: from[0] },
                                { x: to[1], y: to[0] });

                            var arcLine = arcGenerator.Arc(100, { offset: 10 });
                            if (arcLine.geometries.length === 1) {
                                var line = new ol.geom.LineString(arcLine.geometries[0].coords);
                                //line.transform(ol.proj.get('EPSG:4326'), ol.proj.get('EPSG:3857'));

                                var feature = new ol.Feature({
                                    geometry: line,
                                    finished: false
                                });
                                //添加动画的特性与延迟所有功能并不在同一时间开始
                                addLater(feature, i * 50);
                            }
                        }
                        map.on('postcompose', animateFlights);
                    });
                }
            });

            var flightsLayer = new ol.layer.Vector({
                source: flightsSource,
                style: function (feature) {
                    //如果动画仍然是活跃的特性,不渲染图层样式的特性
                    if (feature.get('finished')) {
                        return style;
                    } else {
                        return null;
                    }
                }
            });
            map.addLayer(flightsLayer);
        }
    </script>
</head>
<body>
    <div id="map">
    </div>
</body>
</html>
